<!--  
买家订单列表
-->
<template>
  <view class="qianpq-order_box">
    <view class="order-title">
      <!-- 搜索 -->
      <SearchInput placeholder="搜索商品名" @searchFn="_searchOrder"></SearchInput>
      <!-- 标签切换 -->
      <view style="height: 92rpx;">
        <u-tabs
          v-if="showBar"
          active-color="#E44435"
          height="92"
          inactive-color="#000000"
          font-size="28"
          name="label"
          bar-width="75"
          :list="orderTabs"
          :is-scroll="false"
          :current="getParams.type"
          @change="_changeCurrent"
        ></u-tabs>
      </view>
      <view class="u-flex u-p-l-32 u-p-r-32 u-p-t-20 u-p-b-20 bgf" v-if="getParams.type === 4">
        <view class="cell1" :class="{'activeCell': getAftersaleParams.orderAfterSalesStatus === 1}" @click="_myGetUserOrderAfterSales(1)">售后中</view>
        <view class="cell1" :class="{'activeCell': getAftersaleParams.orderAfterSalesStatus === 2}" @click="_myGetUserOrderAfterSales(2)">售后记录</view>
      </view>
    </view>
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 普通订单列表内容 -->
    <ScrollList ref="scrollView1" :minusHeight="96" v-if="getParams.type !== 4 && orderList.length" @interrupt="interruptOrder" @scrolltolower="scrolltolowerOrder">
      <template slot="content">
        <view v-for="(ord, index) in orderList" :key="index">
          <view style="height:24rpx;"></view>
          <view class="flex-col order_section_9">
          <!-- 未支付倒計時 -->
          <view class="flex-col items-center uppaid-order" v-if="ord.status === 1 && ord.timeFormat">
            <text>请在 {{ord.timeFormat || '00:00:00'}} 内支付，过期订单自动关闭</text>
          </view>
          <!-- 订单信息 -->
          <view class="flex-col order-group_5">
            <view class="justify-between order-section_10">
              <view class="flex-row order-group_6">
                <text class="order-text_13">订单号：</text>
                <text class="order-text_13">{{ord.orderAllId}}</text>
              </view>
              <view class="flex-col items-center order-text-wrapper_1">
                <text>{{comparedValue(orderStatus, ord.status)}}</text>
              </view>
            </view>
            <!-- 商品信息 -->
            <view class="flex-row order-section_12" @click="_goOrderDetails(ord)">
              <scroll-view scroll-x style="max-width:480rpx;">
                <view class="flex-row u-flex-1">
                  <image
                    v-for="(goods,goodsIndex) in ord.orderGoodsRespVOList" :key="goodsIndex"
                    :src="goods.goodsImages"
                    style="flex-shrink: 0;"
                    class="order-image_8 "
                    :class="{'u-margin-left-20': !!goodsIndex}"
                  />
                  <text class="order-text_17" v-if="ord.orderGoodsRespVOList && ord.orderGoodsRespVOList.length === 1">{{ord.orderGoodsRespVOList[0].goodsName}} </text>
                </view>
              </scroll-view>

              <view class="flex-col items-center order-group_9">
                <text class="order-text_18">￥{{ord.payPrice}}</text>
                <text class="order-text_19">共{{ord.count}}件</text>
              </view>
            </view>
            <!-- 快递信息 只在非虚拟物品 -->
            <view 
            v-if="ord.freightType !==2 && ord.courierInformationVOList && ord.courierInformationVOList.length"
            @click="goLogistics(ord.orderAllId)">
              <view class="flex-col order-section_13 fz-12" v-if="ord.courierInformationVOList[ord.courierInformationVOList.length-1].data">
                {{ord.courierInformationVOList[ord.courierInformationVOList.length-1].data || ''}}
              </view>
            </view>
          </view>

          <!-- 已取消||已关闭：再次购买 --> 
          <view class="justify-between items-center order-group_17" v-show="ord.status === 1">
            <view class="fz-12 themeFontColor">{{ord.type === 2 ? '购样订单' : ''}}</view>
            <view class="u-flex">
              <view class="flex-row order-section_14 text_28" @click="_closeOrder(ord,index)">关闭订单</view>
              <button class="flex-col items-center order-text-wrapper_2" :disabled="payDisabledType" @click="_immediatelydPay(ord,index)">{{payDisabledType?'支付中...':"立即支付"}}</button>
            </view>
          </view>
          <!-- 待收货：联系团长，再来一单，确认收货 -->
          <view class="justify-between items-center order-group_17" v-show="ord.status === 5">
            <view class="fz-12 themeFontColor">{{ord.type === 2 ? '购样订单' : ''}}</view>
            <view class="u-flex">
              <view class="flex-row order-section_14 text_28" @click="connection(ord.groupAccountId)">联系团长</view>
              <view class="flex-col items-center order-text-wrapper_2" @click="receipt(ord.orderAllId,index)">确认收货</view>
            </view>
          </view>
          <!-- 已取消||已关闭||待发货||已收货||已完成：联系团长，再来一单 -->
          <view class="justify-between items-center order-group_17" v-show="ord.status !== 1 && ord.status !== 5">
            <view class="fz-12 themeFontColor">{{ord.type === 2 ? '购样订单' : ''}}</view>
            <view class="flex-row order-section_14 text_28" @click="connection(ord.groupAccountId)">联系团长</view>
          </view>
          </view>
        </view>
      </template>
    </ScrollList> 
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 售后订单列表内容 -->
    <ScrollList ref="scrollView2" :minusHeight="146" v-if="getParams.type == 4 && aftersaleList.length" @interrupt="interruptAfter" @scrolltolower="scrolltolowerAfter">
      <template slot="content">
        <view v-for="(item,itemIdx) in aftersaleList" :key="itemIdx" class="px32" @click.stop="_goAfersaleDetails(item.orderAfterSalesId)">
          <view style="height:24rpx;"></view>
          <view class="u-p-u-20 bgf" style="border-radius: 4px;">
            <view class="linh-48 justify-between u-p-l-24 u-p-r-24" style="box-shadow: inset 0px -1px 0px #F2F3F5;">
              <view class="viceColor fz-12">售后单号：{{item.orderAfterSalesId}}</view>
              <view class="fz-14 themeFontColor">{{item.applyType === 1 ? '仅退款' : '退货退款'}}</view>
            </view>
            <view class="u-flex u-p-t-16 u-p-b-16 u-p-l-32 u-p-r-32">
              <view>
                <image :src="item.mainImage" style="width:100rpx;height:100rpx;border-radius: 8px;" />
              </view>
              <view style="flex:1;padding:0 16rpx;" class="ov2 linh-20">{{item.goodsName}}</view>
              <view class="tc">
                <view class="fz-16 fw5">￥{{item.totalApplyAmount}}</view>
                <view class="fz-10 viceColor">共{{item.count}}件</view> 
              </view>
            </view>
            <view class="justify-between items-center  u-p-r-32">
              <view></view>
              <view v-if="getAftersaleParams.orderAfterSalesStatus === 1" class="saleBtn1" @click.stop="_goAfersaleDetails(item.orderAfterSalesId)">售后详情</view>
              <view v-if="getAftersaleParams.orderAfterSalesStatus === 2" class="saleBtn2" @click.stop="_goAfersaleDetails(item.orderAfterSalesId)">售后详情</view>
            </view>
          </view>
        </view>
      </template>
    </ScrollList>
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 未登录-缺省页 -->
    <DefaultPage type="0" tips="登录获取更多优质内容" configText="去登录" :minusHeight="getParams.type === 4 ? 146 : 96" @config="navigateTo({url: '/pages/login/index'})" v-if="!isLogin" />
    <!-- 无售后记录-缺省页 -->
    <DefaultPage type="1" tips="暂无售后记录" configText="立即去跟团" :minusHeight="getParams.type === 4 ? 146 : 96" @config="switchTab({url: '/pages/index/index'})" v-else-if="getParams.type === 4 && !aftersaleList.length && !listMore" />
    <!-- 无订单-缺省页 -->
    <DefaultPage type="1" tips="暂无订单" configText="立即去跟团" :minusHeight="getParams.type === 4 ? 146 : 96" @config="switchTab({url: '/pages/index/index'})" v-else-if="getParams.type !== 4 && !orderList.length && !listMore" />

    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 分割綫 -->
    <!-- 取消原因弹窗 -->
    <u-popup v-model="closeOrderShow" mode="bottom" border-radius="24" @maskClick="closeOrderShow = false">
      <view>
        <view class="headTitle">请选择取消原因</view>
        <scroll-view scroll-y style="height:500rpx;" class="listBody"> 
          <view class="u-padding-left-32 u-padding-right-32 linght44 u-flex u-row-between" v-for="(tx,idx) in otherReasons" :key="idx" @click="_otherReasonsChange(idx)">
            <view>{{tx}}</view>
            <u-icon name="checkbox-mark" class="themeFontColor" size="28" v-if="idx === otherReasonsActive"></u-icon>
          </view>
        </scroll-view>
        <view class="fz-12 tc u-padding-top-8 u-padding-bottom-8">订单关闭后<text class="themeFontColor">无法恢复</text>，你可以重新下单购买</view>
        <view class="themeBgColor configBtn" @click="_configClose">确认关闭</view>
        <view class="safe-bottom"></view>
      </view>
		</u-popup>

    <u-modal v-model="otherReasonsShow" show-cancel-button confirm-text="确定关闭" confirm-color="#E44435" title="其他原因" :title-style="{lineHeight: '44rpx',paddingBottom: '16rpx'}" @confirm="_configClose">
      <view slot>
        <view class="tc fz-12" style="color:#969799;">说明原因以方便团长更好的为你服务</view>
        <view class="u-padding-30 u-padding-left-45 u-padding-right-45 placeholderClass">
          <u-input v-model="cancelReason" type="textarea" :clearable="false" placeholder="请输入原因" :custom-style="{backgroundColor: '#F7F8FA',borderRadius: '16rpx',minHeight: '240rpx',padding: '24rpx 32rpx'}" />
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import DefaultPage from '@/components/defaultPage/index.vue'
import SearchInput from '@/components/searchInput/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import orderApi from "@/api/orderApi.js";
import { comparedValue, orderTabs, orderStatus } from "@/utils/statusList.js"
import mixin from "./myBuyOrder.js";

export default {
  name: 'MyBuyOrderList',
  mixins: [mixin],
  data () {
    return {
      // 列表
      listLoading: false, // 是否在加载中
      listMore: true, // 当前列表是否还有更多
      orderList: [],
      getParams: {
        currentPage: 1,
        pageSize: 10,
        type: 0, // 0.全部 1.待支付 2.待发货 3.待收货
        goodsName: '' // 商品名称
      },
      aftersaleList: [], //售后订单列表
      getAftersaleParams: {
        currentPage: 1,
        pageSize: 10,
        orderAfterSalesStatus : 1, // 1售后中 2售后记录
        goodsName: '' // 商品名称
      },
      showBar: true
    }
  },
  components: {
    DefaultPage,
    SearchInput,
    ScrollList
  },
  computed: { 
    orderTabs(){
      return orderTabs
    },
    orderStatus(){
      return orderStatus
    }
  },
  created(){
    if (this.timer) { //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.timer); 
    }
    this._beginTimer() // 未支付倒计时
  },
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer); 
    }
  },
  methods: {
    comparedValue,
    // 获取列表
    async _getMyBuyOrderListFn () {
      this.listLoading = true // 加载中
      const { data } = await orderApi.myBuyOrderList(this.getParams)
      if(this.getParams.currentPage === 1){
        this.orderList = data.records
      }else{
        this.orderList.push(...data.records)
      }
      if((this.getParams.currentPage * this.getParams.pageSize) !== this.orderList.length){
        this.listMore = false
      }
      this.listLoading = false // 加载完成
    },
    // 订单下拉刷新
    async interruptOrder(){
      this.listMore = true
      this.getParams.currentPage = 1
      await this._getMyBuyOrderListFn()
      setTimeout(() => {
        this.$refs.scrollView1 && this.$refs.scrollView1.refreshFinish() // 刷新完成
      }, 500);
    },
    // 订单加载更多
    async scrolltolowerOrder(){
      this.getParams.currentPage += 1
      await this._getMyBuyOrderListFn()
      this.$refs.scrollView1.loadFinish(this.listMore ? 0 : 3) // 加载完成，是否还有更多
    },
    // 标签卡切换
    _changeCurrent(val){
      if(!this.isLogin){
        this.navigateTo({url: '/pagesB/login/index'});
        return
      }
      this.getParams.type = val
      this.listMore = true
      if(val === 4){ // 查询售后列表
        this._myGetUserOrderAfterSales(1)
      }else{ // 非售后查询列表
        this.getParams.currentPage = 1
        this._getMyBuyOrderListFn()
      }
    },
    // 获取售后列表
    async _myGetUserOrderAfterSales(status){
      if(status !== this.getAftersaleParams.orderAfterSalesStatus){
        this.getAftersaleParams.currentPage = 1
      }
      this.getAftersaleParams.orderAfterSalesStatus = status
      if(this.getAftersaleParams.currentPage === 1){this.aftersaleList = []}

      this.listLoading = true // 加载中
      const { data } = await orderApi.myGetUserOrderAfterSales(this.getAftersaleParams)
      if(this.getAftersaleParams.currentPage === 1){
        this.aftersaleList = data.records
      }else{
        this.aftersaleList.push(...data.records)
      }
      if((this.getAftersaleParams.currentPage * this.getAftersaleParams.pageSize) !== this.aftersaleList.length){
        this.listMore = false
      }
      this.listLoading = false // 加载完成
    },
    // 售后下拉刷新
    async interruptAfter(){
      this.listMore = true
      this.getAftersaleParams.currentPage = 1
      await this._myGetUserOrderAfterSales(this.getAftersaleParams.orderAfterSalesStatus)
      setTimeout(() => {
        this.$refs.scrollView2 && this.$refs.scrollView2.refreshFinish() // 刷新完成
      }, 500);
    },
    // 售后加载更多
    async scrolltolowerAfter(){
      this.getAftersaleParams.currentPage += 1
      await this._myGetUserOrderAfterSales(this.getAftersaleParams.orderAfterSalesStatus)
      this.$refs.scrollView2.loadFinish(this.listMore ? 0 : 3) // 加载完成，是否还有更多
    },
    // 根据商品名称搜索订单
    _searchOrder(val){
      if(this.listLoading) return
      if(this.getParams.type === 4){ //查询售后列表
        this.getAftersaleParams.currentPage = 1
        this.getAftersaleParams.goodsName = val
        this._myGetUserOrderAfterSales(this.getAftersaleParams.orderAfterSalesStatus)
      }else{
        this.getParams.currentPage = 1
        this.getParams.goodsName = val
        this._getMyBuyOrderListFn()
      }
    },
    // 未支付倒计时
    _beginTimer(){
      if(this.getParams.type === 0 || this.getParams.type === 1){ // 只在全部以及待支付出现倒计时
        this.timer = setInterval(() => {
          for (let i = 0, len = this.orderList.length; i < len; i++) {
            if(this.orderList[i].status === 1){
              let endTime = Date.parse(new Date(this.orderList[i].createTime.replace(/-/g, "/"))) + 300000 // 截止时间戳
              let newTime = Date.parse(new Date())
              let timeFormat = endTime > newTime ? endTime - newTime : 0 // 剩余时间
              if (timeFormat > 0) {
                this.$set(this.orderList[i],'timeFormat',this._countDownmintus(timeFormat))
              }else{ // 超时前端静默更新状态
                this.orderList[i].status = 2
              }
            }
          }
        }, 1000);
      }
    },
    
    // 跳转详情
    _goOrderDetails(ord){
      this.navigateTo({ url: `/pagesA/order/myOrderDetails?orderAllId=${ord.orderAllId}` })
    },
    // 联系团长
    connection(groupAccountId){
      if(this.$store.state.imUserInfo.imId === groupAccountId){
        uni.showToast({
          title: '不能联系自己',
          icon: 'none'
        });
        return
      }else{
        this.navigateTo({url: '/pagesB/message/messageDetails?id='+groupAccountId})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.qianpq-order_box {
  height: 100%;
}

.bgf{
  background-color: #FFF;
}
.ov2{
  @include bov(2);
}
.cell1{
  background: #F2F3F5;
  border-radius: 4px;
  color: #969799;
  line-height: 40rpx;
  padding: 10rpx 20rpx;
}
.cell1+.cell1{
  margin-left: 20rpx;
}
.activeCell.cell1{
  background: #FFE5DE;
  color: $themeColor;
}
// 订单列表
.order_section_9 {
  margin: 0 32rpx;
  overflow: hidden;
  border-radius: 8rpx;
  background: rgb(255, 255, 255);
}
.order-group_17 {
  margin: 36rpx 0;
  padding: 0 16rpx;
}
.order-section_10 {
  padding: 25rpx 32rpx 26rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgb(238, 238, 238);
  position: relative;
}

.order-section_12 {
  padding: 19rpx 30rpx 19rpx 32rpx;
  background-color: rgb(255, 255, 255);
}
.order-section_13 {
  margin: 12rpx 32rpx 0;
  padding: 16rpx;
  background-color: #F7F8FA;
  border-radius: 8rpx;
  color: #969799;
}
.order-text_27 {
  margin: 9rpx 30rpx 7rpx 0;
  color: rgb(0, 0, 0, 0.6);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
}
.order-section_14 {
  margin-right: 16rpx;
  padding: 0 15rpx;
  font-size: 24rpx;
  line-height: 46rpx;
  white-space: nowrap;
  border-radius: 50rpx;
  height: 50rpx;
  border: solid 2rpx rgb(220, 222, 224);
}
.order-text-wrapper_2 {
  color: rgb(255, 255, 255);
  font-size: 24rpx;
  line-height: 46rpx;
  white-space: nowrap;
  background-color: rgb(228, 68, 53);
  border-radius: 50rpx;
  width: 128rpx;
  height: 50rpx;
  border: solid 2rpx rgb(228, 68, 53);
}
.order-group_6 {
  margin-top: 3rpx;
}
.order-text-wrapper_1 {
  margin-bottom: 3rpx;
  padding: 10rpx 0 8rpx;
  color: rgb(228, 68, 53);
  font-size: 20rpx;
  line-height: 28rpx;
  white-space: nowrap;
  background-color: rgb(255, 239, 219);
  border-radius: 4rpx;
  width: 92rpx;
  height: 46rpx;
}
.order-image_8 {
  border-radius: 4rpx;
  width: 100rpx;
  height: 100rpx;
}
.order-text_17 {
  width: 400rpx;
  margin-left: 16rpx;
  flex: 1 1 auto;
  align-self: center;
  color: rgb(0, 0, 0);
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.order-group_9 {
  margin-left: 30rpx;
  align-self: center;
}
.order-image_12 {
  margin-bottom: 4rpx;
  width: 22rpx;
  height: 30rpx;
}
.text_28 {
  margin-left: 5rpx;
}
.order-text_13 {
  margin: 6rpx 0;
  color: #969799;
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
}
.order-text_18 {
  color: rgb(0, 0, 0);
  font-size: 32rpx;
  font-weight: 500;
  line-height: 44rpx;
  white-space: nowrap;
}
.order-text_19 {
  color: rgb(0, 0, 0);
  font-size: 20rpx;
  line-height: 28rpx;
  white-space: nowrap;
}
// 订单列表结束

// 待支付
.uppaid-order {
  padding: 12rpx 0 12rpx;
  color: rgb(191, 31, 6);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  background-color: rgb(255, 233, 233);
}
.uppaid-order-text {
  background-color: rgb(251, 149, 81);
  color: rgb(255, 255, 255);
}
.canceled-text {
  background-color: rgb(220, 222, 224);
  color: rgb(150, 151, 153);
}
.evaluate-order-wrapper {
  border: solid 2rpx rgb(228, 68, 53);
  color: rgb(228, 68, 53);
  background-color: #fff;
  margin-right: 16rpx;
}

.section_15 {
  margin: 0 16rpx 16rpx;
  padding: 16rpx 16rpx 14rpx;
  color: rgb(0, 0, 0);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
  background-color: rgb(242, 243, 245);
  border-radius: 8rpx;
}
.image_11 {
  margin: 4rpx 7rpx 6rpx 0;
  width: 16rpx;
  height: 24rpx;
}

// 售后
.after-sales-section_9 {
  padding: 20rpx 32rpx;
  background-color: rgb(255, 255, 255);
  border-top: 2rpx solid #f2f3f5;
  position: absolute;
  top: 0;
}
.text-wrapper_1 {
  padding: 10rpx 0;
  color: rgb(228, 68, 53);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  background-color: rgb(255, 229, 222);
  border-radius: 8rpx;
  width: 120rpx;
  height: 60rpx;
}
.text-wrapper_2 {
  margin-left: 16rpx;
  padding: 6rpx 0;
  color: rgb(150, 151, 153);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  background-color: rgb(242, 243, 245);
  border-radius: 8rpx;
  width: 120rpx;
  height: 60rpx;
}

// 售后
.custom-navbar {
  width: 352rpx;
  height: 64rpx;
  background: #f5f5f5;
  border-radius: 32rpx;
  display: flex;
  margin-left: 32rpx;
  .custom-navbar-li {
    width: 176rpx;
    height: 64rpx;
    border-radius: 32rpx;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0,0,0,0.30);
  }
  .active {
    background: #e44435;
    color: #fff;
  }
}
.headTitle {
  color: rgba(0, 0, 0, 0.9);
  line-height: 96rpx;
  font-weight: 500;
  font-size: 36rpx;
  text-align: center;
}
.listBody{
  background-color: #F7F8FA;
  .linght44{
    line-height: 88rpx;
    background-color: #FFF;
  }
}

.configBtn{
  margin:0 32rpx;
  border-radius: 8rpx;
  line-height: 96rpx;
  text-align: center;
  color: #FFF;
}

.ov1{
  @include toe();
}
.saleBtn1{
  margin: 24rpx 0;
  background: #FFF0F0;
  border: 1px solid #F3264A;
  border-radius: 16px;
  color: #E44435;
  font-size: 24rpx;
  padding: 6rpx 20rpx;
}
.saleBtn2{
  margin: 24rpx 0;
  background: #FFFFFF;
  border: 1px solid #DCDEE0;
  border-radius: 16px;
  color: #969799;
  font-size: 24rpx;
  padding: 6rpx 20rpx;
}
</style>